<template>
	<view class="container">
		<!-- 标题导航 -->
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="rgb(244, 30, 132)" class="titleNav"></uni-segmented-control>
		<!-- 内容 -->
		<view class="content">
			<!-- 发现的第一个页面 -->
			<view v-show="current === 0">
				<!-- 三块 -->
				<view class="top">
					<view class="topOne">
						<text class="up">会员中心</text>
						<text class="down">买一赠一超值...</text>
					</view>
					<view class="topTwo">
						<text class="up">小聚场</text>
						<text class="down">组团看送你一朵小红花...</text>
					</view>
					<view class="topThree">
						<text class="up">爱艺之城</text>
						<text class="down">艺术影片社区</text>
					</view>
				</view>
				<!-- 观点 -->
				<view class="viewpoint">
					<text class="tips" style="font-size: 14px; color: #b2b3b3; background-color: #676969;">观点</text>
					<text style="font-size: 14px; color: #999999; border: 1px solid #c4c4c4;">人生路不熟的聚会</text>
					<uni-title class="h3" type="h3" title="《人生路不熟》里范丞丞和张婧仪其实彼此有好感"></uni-title>
					<view class="vote">
						<view class="voteAgree">
							<text class="voteUp">赞同</text>
							<text class="voteDown">彼此有好感</text>
						</view>
						<view class="voteDisagree">
							<text class="voteUp">不赞同</text>
							<text class="voteDown">并非男女之情</text>
						</view>
					</view>
					<view class="viewpointBottom">
						<view class="bottomLeft">
							<image src="../../static/user1.jpg" style="width: 40rpx;height: 40rpx;border-radius: 50%;">
							</image>
							<image src="../../static/user2.jpg" style="width: 40rpx;height: 40rpx;border-radius: 50%;">
							</image>
							<image src="../../static/user3.jpg" style="width: 40rpx;height: 40rpx;border-radius: 50%;">
							</image>
							<text style="margin-left: 10rpx;">1999人参与投票</text>
						</view>
						<view class="bottomRight">
							<text>19条评论</text>
							<uni-icons type="right" size="10"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 热门话题 -->
				<view class="hotTopic">
					<!-- 标题 -->
					<view class="hotTopicTit">
						<text>热门话题</text>
						<view>
							<text style="color: rgb(204, 204, 204)" @click="handleJumpPage">全部话题</text>
							<uni-icons type="forward" size="20" style="color: rgb(204, 204, 204)"
								@click="handleJumpPage"></uni-icons>
						</view>
					</view>
					<!-- 内容 -->
					<view class="hotTopicCon">
						<!-- top3 -->
						<view class="topTopic">
							<!-- 1 -->
							<view class="topTopOne">
								<uni-icons type="fire-filled" size="35" style="color: rgb(251, 109, 150);"></uni-icons>
								<image src="../../static/top1.png"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;"></image>
								<view class="">
									<text style="font-size: 24rpx;">用生命守护生命是我们的使命</text>
									<view class="topicTp">
										<view class="topicTpPhoto">
											<image src="../../static/imgs/user8.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user9.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user6.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
										</view>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">286讨论</text>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">1639阅读</text>
									</view>
								</view>
							</view>
							<!-- 2 -->
							<view class="topTopOne">
								<uni-icons type="fire-filled" size="35" style="color: rgb(253, 147, 61);"></uni-icons>
								<image src="../../static/top1.png"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;"></image>
								<view class="">
									<text style="font-size: 24rpx;">用生命守护生命是我们的使命</text>
									<view class="topicTp">
										<view class="topicTpPhoto">
											<image src="../../static/imgs/user8.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user9.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user6.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
										</view>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">286讨论</text>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">1639阅读</text>
									</view>
								</view>
							</view>
							<!-- 3 -->
							<view class="topTopOne">
								<uni-icons type="fire-filled" size="35" style="color: rgb(250, 217, 80);"></uni-icons>
								<image src="../../static/top1.png"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;"></image>
								<view class="">
									<text style="font-size: 24rpx;">用生命守护生命是我们的使命</text>
									<view class="topicTp">
										<view class="topicTpPhoto">
											<image src="../../static/imgs/user8.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user9.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
											<image src="../../static/imgs/user6.jpg"
												style="width: 30rpx;height: 30rpx;border-radius: 50%;">
											</image>
										</view>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">286讨论</text>
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">1639阅读</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 一起聊电影 -->
				<view class="together">
					<!-- 标题 -->
					<uni-title class="h3" type="h3" title="一起聊电影" style="padding-left: 10rpx;"></uni-title>
					<!-- 话题 -->
					<view class="topic">
						<view class="topicCon">
							<view class="topicMess">
								<text style="font-size: 26rpx;">#</text>
							</view>
							<view>
								<text style="font-size: 26rpx;display: block;">BGM之摩尔庄园</text>
								<text style="font-size: 20rpx;color: rgb(153, 153, 153);">加入爱艺之城，赢彩票</text>
							</view>
							<text class="recommend">荐</text>
						</view>
						<view class="topicCon">
							<view class="topicMess">
								<text style="font-size: 26rpx;">#</text>
							</view>
							<view>
								<text style="font-size: 26rpx;display: block;">BGM之摩尔庄园</text>
								<text style="font-size: 20rpx;color: rgb(153, 153, 153);">加入爱艺之城，赢彩票</text>
							</view>
							<text class="recommend">荐</text>
						</view>
					</view>
					<!-- 最热评论 最新评论 -->
					<view class="latestHottest">
						<uni-segmented-control :current="currentIn" :values="list" @clickItem="onClickItems"
							styleType="text" class="title"></uni-segmented-control>
						<view v-show="currentIn === 0">
							<!-- 最热评论 -->
							<view class="oneUser">
								<!-- 头像 用户名 时间 -->
								<view class="oneUserTit">
									<view>
										<image src="../../static/user1.jpg"
											style="width: 120rpx;height: 120rpx;border-radius: 50%;">
										</image>
										<view style="float: right;">
											<text
												style="display: block;padding-top: 15rpx;padding-bottom: 5rpx;font-size: 24rpx;">轻松熊永远不倒立吖</text>
											<text style="font-size: 20rpx;color: rgb(206, 206, 206);">5天前</text>
										</view>
									</view>
									<!-- 分享到 -->
									<uni-icons type="more-filled" size="20" @click="shareToggle"></uni-icons>
									<!-- 分享示例 -->
									<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
										<uni-popup-share></uni-popup-share>
									</uni-popup>
								</view>
								<view>
									<text
										style="font-size: 30rpx;font-weight: 400;color: rgb(16, 16, 16);padding: 10rpx;">#分享你的爱情故事，赢限量云知道帆布包#</text>
									<view class="CommentContent">
										<text style="font-size: 26rpx;">《只有云知道》有句台词 有你的日子
											就是我要过的日子爱情的开始总是那样美好,令人充满希望</text>
									</view>
								</view>
								<!-- 评论的图片 (可以实现多张预览)-->
								<uni-image-preview :urls="imageUrls"></uni-image-preview>
								<image v-for="(url, index) in imageUrls" :key="index" :src="url"
									@click="previewImage(index)"
									style="width: 200rpx;height: 200rpx;margin-left: 20rpx; border-radius: 10rpx;">
								</image>
								<!-- 话题 -->
								<view class='smallTopic'>#一人一个爱情故事</view>
								<!-- 来自 -->
								<view class="fromArea">
									<text style="font-size: 18rpx;color: rgb(209, 209, 209);">来自</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">只有云知道</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">讨论区</text>
									<uni-icons type="forward" size="10"></uni-icons>
								</view>
								<!-- 点赞 回复 转发 -->
								<view class="symboIcon">
									<text class="iconfont icon-dianzan_xian24"
										style="color: rgb(166, 179, 197);">999</text>
									<text class="iconfont icon-review" style="color: rgb(166, 179, 197);"
										@click="toggleBot('bottom')">45</text>
									<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"
										@click="toggle('center')"></text>
								</view>
							</view>
							<!-- 第二条评论 -->
							<view class="oneUser">
								<view class="oneUserTit">
									<view>
										<image src="../../static/user2.jpg"
											style="width: 120rpx;height: 120rpx;border-radius: 50%;">
										</image>
										<view style="float: right;">
											<text
												style="display: block;padding-top: 15rpx;padding-bottom: 5rpx;font-size: 24rpx;">甲方爸爸你坐下</text>
											<text style="font-size: 20rpx;color: rgb(206, 206, 206);">4天前</text>
										</view>
									</view>
									<uni-icons type="more-filled" size="20" @click="shareToggle"></uni-icons>
								</view>
								<view>
									<text
										style="font-size: 30rpx;font-weight: 400;color: rgb(16, 16, 16);padding: 10rpx;">#爱艺之城版本龙互动福利#</text>
									<view class="CommentContent">
										<text style="font-size: 26rpx;">《只有云知道》有句台词 有你的日子
											就是我要过的日子爱情的开始总是那样美好,令人充满希望</text>
									</view>
								</view>
								<!-- 评论的图片 (可以实现多张预览)-->
								<uni-image-preview :urls="imageUrl"></uni-image-preview>
								<image v-for="(url, index) in imageUrl" :key="index" :src="url"
									@click="previewImages(index)"
									style="width: 200rpx;height: 200rpx;margin-left: 20rpx; border-radius: 10rpx;">
								</image>
								<!-- 话题 -->
								<view class='smallTopic'>#一人一个爱情故事</view>
								<!-- 来自 -->
								<view class="fromArea">
									<text style="font-size: 18rpx;color: rgb(209, 209, 209);">来自</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">只有云知道</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">讨论区</text>
									<uni-icons type="forward" size="10"></uni-icons>
								</view>
								<!-- 点赞 回复 转发 -->
								<view class="symboIcon">
									<text class="iconfont icon-dianzan_xian24"
										style="color: rgb(166, 179, 197);">999</text>
									<text class="iconfont icon-review" style="color: rgb(166, 179, 197);"
										@click="toggleBot('bottom')">45</text>
									<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"
										@click="toggle('center')"></text>
								</view>
							</view>
						</view>
						<view v-show="currentIn === 2">
							<view class="oneUser">
								<view class="oneUserTit">
									<view>
										<image src="../../static/user1.jpg"
											style="width: 120rpx;height: 120rpx;border-radius: 50%;">
										</image>
										<view style="float: right;">
											<text
												style="display: block;padding-top: 15rpx;padding-bottom: 5rpx;font-size: 24rpx;">轻松熊永远不倒立吖</text>
											<text style="font-size: 20rpx;color: rgb(206, 206, 206);">5分钟前</text>
										</view>
									</view>
									<uni-icons type="more-filled" size="20"></uni-icons>
								</view>
								<view>
									<text
										style="font-size: 30rpx;font-weight: 400;color: rgb(16, 16, 16);padding: 10rpx;">#分享你的爱情故事，赢限量云知道帆布包#</text>
									<view class="CommentContent">
										<text style="font-size: 26rpx;">《只有云知道》有句台词 有你的日子
											就是我要过的日子爱情的开始总是那样美好,令人充满希望</text>
									</view>
								</view>
								<!-- 评论的图片 (可以实现多张预览)-->
								<uni-image-preview :urls="imageUrls"></uni-image-preview>
								<image v-for="(url, index) in imageUrls" :key="index" :src="url"
									@click="previewImage(index)"
									style="width: 200rpx;height: 200rpx;margin-left: 20rpx; border-radius: 10rpx;">
								</image>
								<!-- 话题 -->
								<view class='smallTopic'>#一人一个爱情故事</view>
								<!-- 来自 -->
								<view class="fromArea">
									<text style="font-size: 18rpx;color: rgb(209, 209, 209);">来自</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">只有云知道</text>
									<text style="font-size: 18rpx;color: rgb(167, 167, 167);">讨论区</text>
									<uni-icons type="forward" size="10"></uni-icons>
								</view>
								<!-- 点赞 回复 转发 -->
								<view class="symboIcon">
									<text class="iconfont icon-dianzan_xian24"
										style="color: rgb(166, 179, 197);">99</text>
									<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">5</text>
									<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 回复弹窗 -->
				<uni-popup ref="popupReply" background-color="#fff" @change="change">
					<view class="popup-reply" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<!-- 回复标题 -->
						<view class="replyTitle">
							<text style="font-size: 36rpx;">回复详情</text>
							<uni-icons type="closeempty" size="20" style="float: right;color: rgb(153, 153, 153);" @click="closeReplyPopup"></uni-icons>
						</view>
						<!-- 热门回复标题 -->
						<view class="replyHead">
							<text>最热回复</text>
							<text style="color: rgb(153, 153, 153);">（1）</text>
						</view>
						<!-- 热门回复内容 -->
						<view class="reply-hotContent">
							<image src="../../static/imgs/user6.jpg"
								style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 20rpx;">
								</image>
								<view class="reply-hotR">
									<view class="reply-HotName">
										<view class="">
											<text style="line-height: 60rpx;color: rgb(109, 109, 109);">lyw0923</text>
											<!-- 评分 -->
											<uni-rate v-model="rateValue" @change="onChangeRate" allow-half size="18"/>
										</view>
										<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">6</text>
										
									</view>
									<!-- 内容 -->
									<text>好久没看到这么好的喜剧电影了 有感动 有欢喜 有共情 有平凡人的感同身受 有对爱情担当的新感悟 有对人生奋斗的坚定属望 易小星导演节奏把握无敌! 包状节奏感太好了 ! !! 五一档强推</text>
									<!-- 标签 -->
									<view class='smallTopic'>#一人一个爱情故事</view>
									<!-- 热门评论底部 -->
									<view class="reply-hotBottom">
										<view class="reply-hotBottomLeft">
											<text style="margin-right: 15rpx;width: 150rpx;height: 60rpx;background-color: rgb(238, 241, 246); color: rgb(116, 145, 184);">484回复</text>
											<text style="margin-right: 15rpx;">05-06</text>
											<text>河北</text>
										</view>
										<uni-icons type="more-filled" size="20" style="color: rgb(158, 162, 185);" @click="handleShowReport"></uni-icons>
									</view>
								</view>
						</view>
						<!-- 全部回复头部 -->
						<view class="replyHeadAll">
							<text>全部回复</text>
							<text style="color: rgb(153, 153, 153);">（487）</text>
						</view>
						<!-- 回复内容 -->
						<view class="replyContent">
							<image src="../../static/imgs/user4.jpg"
								style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 20rpx;">
								</image>
							<view class="reply-con">
									<view class="reply-ConName">
										<text style="color: rgb(109, 109, 109);line-height: 80rpx;">yyqx001128</text>
										<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">6</text>
									</view>
									<text style="line-height: 60rpx;">真的超级好看！二刷了</text>
									<view class="reply-conBot">
										<view>
											<text style="margin-right: 15rpx;">05-06</text>
											<text>山西</text>
										</view>
										<uni-icons type="more-filled" size="20" style="color: rgb(158, 162, 185);" @click="handleShowReport"></uni-icons>
									</view>
							</view>
						</view>
						<!-- 回复内容2 -->
						<view class="replyContent">
							<image src="../../static/imgs/user5.jpg"
								style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 20rpx;">
								</image>
							<view class="reply-con">
									<view class="reply-ConName">
										<text style="color: rgb(109, 109, 109);line-height: 80rpx;">syx0304</text>
										<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">6</text>
									</view>
									<text style="line-height: 60rpx;">爱了爱了！！！</text>
									<view class="reply-conBot">
										<view>
											<text style="margin-right: 15rpx;">03-06</text>
											<text>山西</text>
										</view>
										<uni-icons type="more-filled" size="20" style="color: rgb(158, 162, 185);" @click="handleShowReport"></uni-icons>
									</view>
							</view>
						</view>
						<!-- 举报提醒 -->
						<view class="report" v-show='showReport' @click="showReports">
							<text>举报</text>
						</view>
					</view>
				</uni-popup>
				<!-- 转发弹出窗 -->
				<uni-popup ref="popup" style="width: 100%;" background-color="#fff" @change="change">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<text>快转</text>
						<view class="popup-text">
							<text class="iconfont icon-fenxiang"
								style="color: rgb(166, 179, 197);margin-right: 15rpx;"></text>
							<text @click="transpond">转发</text>
						</view>

					</view>
				</uni-popup>
				<!-- 热门标签 -->
				<view class="hotTag">
					<!-- 标题 -->
					<view class="hotTagTit">
						<text>热门标签</text>
						<view>
							<text style="color: rgb(204, 204, 204)" @click="handleJumpPageTag">全部标签</text>
							<uni-icons type="forward" size="20" style="color: rgb(204, 204, 204)"
								@click="handleJumpPageTag"></uni-icons>
						</view>
					</view>
					<!-- 内容 -->
					<view class="hotTopicCon">
						<!-- top3 -->
						<view class="topTopic">
							<!-- 1 -->
							<view class="tagTopOne">
								<image src="../../static/imgs/tag1.jpg"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;margin-left: 25rpx;"></image>
								<view style="margin-left: 25rpx;">
									<text style="font-size: 24rpx;">#问答</text>
									<view class="topicTp">
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">2856人正在讨论</text>
									</view>
								</view>
							</view>
							<!-- 2 -->
							<view class="tagTopOne">
								<image src="../../static/imgs/tag2.jpg"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;margin-left: 25rpx;"></image>
								<view style="margin-left: 25rpx;">
									<text style="font-size: 24rpx;">#龙马精神</text>
									<view class="topicTp">
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">2853人正在讨论</text>
									</view>
								</view>
							</view>
							<!-- 3 -->
							<view class="tagTopOne">
								<image src="../../static/imgs/tag3.jpg"
									style="width: 80rpx;height: 80rpx;border-radius: 20rpx;margin-left: 25rpx;"></image>
								<view style="margin-left: 25rpx;">
									<text style="font-size: 24rpx;">#这么多年</text>
									<view class="topicTp">
										<text style="font-size: 20rpx; color: rgb(200, 196, 193);">2156人正在讨论</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 聚会 -->
			<view v-show="current === 1" class="party">
				<!-- 全部 热门 同城 -->
				<view class="partyTit">
					<!-- 导航选项卡 -->
					<view class="inv-h-w">
						<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">全部</view>
						<view style="color: rgb(166, 176, 194);">
							|
						</view>
						<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">热门</view>
						<view style="color: rgb(166, 176, 194);">
							|
						</view>
						<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">同城</view>
					</view>
					<view style="color: rgb(166, 176, 194); font-size: 24rpx;">923条评论</view>
				</view>
				<view class="" v-show="Inv == 0">
					<!-- 第一条评论 热评论-->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user1.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">明浩呀</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text
								style="font-size: 24rpx;">看完电影，久久不能平静。其实看之前，也料到了自己会哭的稀里哗啦，作为从小看成龙大哥电影长大的八零后，对大哥一直就是满满的崇拜，佩服，敬仰。看完《龙马精神》，再次为大哥拼命拍戏的精神流泪，为大哥的敬业流泪，被成龙大哥的真挚干脆感动，被大哥和赤兔之间的相知相惜感动，被父女俩的亲情感</text>
						</view>
						<!-- 回复热度first -->
						<view class="replyHot">
							<uni-icons type="fire-filled" size="30"
								style="color: rgb(249, 79, 135);margin-right: 10rpx;"></uni-icons>
							<text>C**8：</text>
							<text>至少我觉得龙马精神比忠犬八公好。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 第二条评论 热评论-->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user2.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">玺XXX</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text
								style="font-size: 24rpx;">看完电影，久久不能平静。其实看之前，也料到了自己会哭的稀里哗啦，作为从小看成龙大哥电影长大的八零后，对大哥一直就是满满的崇拜，佩服，敬仰。看完《龙马精神》，再次为大哥拼命拍戏的精神流泪，为大哥的敬业流泪，被成龙大哥的真挚干脆感动，被大哥和赤兔之间的相知相惜感动，被父女俩的亲情感</text>
						</view>
						<!-- 回复热度first -->
						<view class="replyHot">
							<uni-icons type="fire-filled" size="30"
								style="color: rgb(249, 79, 135);margin-right: 10rpx;"></uni-icons>
							<text>C**8：</text>
							<text>至少我觉得龙马精神比忠犬八公好。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 第三条评论 热评论-->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">Dalala</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">我想知道会不会被删减啊，看宣传片感觉挺不错的。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 只展示热度高的top3 -->
					<view class="hotTop">
						<text style="color: rgb(125, 133, 133);">以上为热门讨论,</text>
						<text @click="Inv=1" style="color: rgb(60, 154, 219);">查看更多</text>
					</view>
					<!-- 热度不高的评论 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">西二环街霸</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">应该是我认知里的那种不好看的电影</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">赞</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">评论</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">唱一首歌</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2022-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">看不懂</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">赞</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">评论</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">t***88</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2022-11-18</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">失望，至极！</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">赞</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">评论</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
				</view>
				<!-- 热门 -->
				<view class="hotCommon" v-show="Inv == 1">
					<!-- 1 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user1.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">明浩呀</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text
								style="font-size: 24rpx;">看完电影，久久不能平静。其实看之前，也料到了自己会哭的稀里哗啦，作为从小看成龙大哥电影长大的八零后，对大哥一直就是满满的崇拜，佩服，敬仰。看完《龙马精神》，再次为大哥拼命拍戏的精神流泪，为大哥的敬业流泪，被成龙大哥的真挚干脆感动，被大哥和赤兔之间的相知相惜感动，被父女俩的亲情感</text>
						</view>
						<!-- 回复热度first -->
						<view class="replyHot">
							<uni-icons type="fire-filled" size="30"
								style="color: rgb(249, 79, 135);margin-right: 10rpx;"></uni-icons>
							<text>C**8：</text>
							<text>至少我觉得龙马精神比忠犬八公好。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 2 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user2.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">玺XXX</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text
								style="font-size: 24rpx;">看完电影，久久不能平静。其实看之前，也料到了自己会哭的稀里哗啦，作为从小看成龙大哥电影长大的八零后，对大哥一直就是满满的崇拜，佩服，敬仰。看完《龙马精神》，再次为大哥拼命拍戏的精神流泪，为大哥的敬业流泪，被成龙大哥的真挚干脆感动，被大哥和赤兔之间的相知相惜感动，被父女俩的亲情感</text>
						</view>
						<!-- 回复热度first -->
						<view class="replyHot">
							<uni-icons type="fire-filled" size="30"
								style="color: rgb(249, 79, 135);margin-right: 10rpx;"></uni-icons>
							<text>C**8：</text>
							<text>至少我觉得龙马精神比忠犬八公好。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 3 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">Dalala</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">我想知道会不会被删减啊，看宣传片感觉挺不错的。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
				</view>
				<!-- 同城 -->
				<view class="localCommon" v-show="Inv == 2">
					<!-- 1 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user1.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">明浩呀</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text
								style="font-size: 24rpx;">看完电影，久久不能平静。其实看之前，也料到了自己会哭的稀里哗啦，作为从小看成龙大哥电影长大的八零后，对大哥一直就是满满的崇拜，佩服，敬仰。看完《龙马精神》，再次为大哥拼命拍戏的精神流泪，为大哥的敬业流泪，被成龙大哥的真挚干脆感动，被大哥和赤兔之间的相知相惜感动，被父女俩的亲情感</text>
						</view>
						<!-- 回复热度first -->
						<view class="replyHot">
							<uni-icons type="fire-filled" size="30"
								style="color: rgb(249, 79, 135);margin-right: 10rpx;"></uni-icons>
							<text>C**8：</text>
							<text>至少我觉得龙马精神比忠犬八公好。</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">999</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">45</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
					<!-- 2 -->
					<view class="firstCommon">
						<!-- 头像 用户名 发布时间 -->
						<view class="oneUserTit">
							<view>
								<image src="../../static/user3.jpg"
									style="width: 90rpx;height: 90rpx;border-radius: 50%;">
								</image>
								<view style="float: right;">
									<text style="display: block;padding: 5rpx;font-size: 24rpx;">西二环街霸</text>
									<text style="font-size: 20rpx;color: rgb(206, 206, 206);">2023-5-17</text>
								</view>
							</view>
							<uni-icons type="more-filled" size="20"></uni-icons>
						</view>
						<!-- 内容 -->
						<view class="CommentContent">
							<text style="font-size: 24rpx;">应该是我认知里的那种不好看的电影</text>
						</view>
						<!-- 点赞 回复 转发 -->
						<view class="symboIcon">
							<text class="iconfont icon-dianzan_xian24" style="color: rgb(166, 179, 197);">赞</text>
							<text class="iconfont icon-review" style="color: rgb(166, 179, 197);">评论</text>
							<text class="iconfont icon-fenxiang" style="color: rgb(166, 179, 197);"></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 满江红 -->
			<view v-show="current === 2">
				满江红的内容
			</view>
			<!-- 长津湖 -->
			<view v-show="current === 3">
				长津湖的内容
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view>
			<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger"></uni-fab>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['广场', '龙马精神聚会', '满江红', '长津湖'],
				current: 0,
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: 'rgb(251, 55, 119)',
					buttonColor: 'rgb(251, 55, 119)',
					iconColor: '#fff',
					// icon:''
				},
				currentIn: 0,
				list: ['最热讨论', '|', '最新讨论'],
				imageUrls: [
					'../../static/user1.jpg',
					'../../static/user2.jpg',
					'../../static/user3.jpg'
				],
				imageUrl: [
					'../../static/user1.jpg',
					'../../static/user2.jpg',
					'../../static/user3.jpg',
					'../../static/user1.jpg',
					'../../static/user2.jpg',
					'../../static/user3.jpg',
					'../../static/user1.jpg',
					'../../static/user2.jpg',
					'../../static/user3.jpg',
				],
				Inv: 0,
				inv: 0,
				showReport:false,
				rateValue: 3.5,
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			onClickItems(e) {
				if (this.currentIn != e.currentIndex) {
					this.currentIn = e.currentIndex
				}
			},
			// 实现图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.imageUrls,
					current: this.imageUrls[index]
				})
			},
			// 图片预览九张
			previewImages(index) {
				uni.previewImage({
					urls: this.imageUrl,
					current: this.imageUrl[index]
				})
			},
			// 跳转页面 全部话题
			handleJumpPage() {
				uni.navigateTo({
					url: '/pages/topic/topic'
				})
			},
			// 跳到全部标签的页面
			handleJumpPageTag() {
				uni.navigateTo({
					url: '/pages/tag/tag'
				})
			},
			// 点击弹出分享
			shareToggle() {
				this.$refs.share.open()
			},
			// 转发弹窗
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 转发评论
			transpond() {
				uni.navigateTo({
					url: '/pages/transpond/transpond'
				})
			},
			// 回复弹窗
			toggleBot(type){
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupReply.open(type)
			},
			// 关闭回复弹窗
			closeReplyPopup(){
				this.$refs.popupReply.close()
			},
			// 点击显示举报弹框
			handleShowReport(){
				this.showReport=true
			},
			// 点击关闭举报弹框
			showReports(){
				this.showReport=false
			},
			// 评分组件事件
			onChangeRate(e){
				
			},
		},
	}
</script>

<style lang="scss">
	.titleNav {
		height: 25%;
		background-color: #fff;
		font-size: 48rpx;
		font-style: normal;
		color: rgba(148, 148, 148, 1);
		margin-top: 45rpx;
		line-height: 25%;
	}

	.top {
		display: flex;
		padding: 40rpx 10rpx 40rpx 10rpx;
		justify-content: space-around;
	}

	.topOne {
		width: 32%;
		height: 114rpx;
		text-align: center;
		background-color: rgb(255, 149, 2);
		border-radius: 5%;
	}

	.topTwo {
		width: 32%;
		height: 114rpx;
		text-align: center;
		background-color: #5756d7;
		border-radius: 5%;
	}

	.topThree {
		width: 32%;
		height: 114rpx;
		text-align: center;
		background-color: #007aff;
		border-radius: 5%;
	}

	.up {
		font-size: 32rpx;
		color: #fff6e9;
		display: block;
		margin-top: 15rpx;
	}

	.down {
		font-size: 20rpx;
		color: rgb(255, 255, 255);
	}

	.viewpoint {
		width: 90%;
		height: 350rpx;
		margin: 0 auto;
		background-color: #fff;
		padding: 20rpx 30rpx 20rpx 30rpx;
		border-radius: 5%;
	}

	.vote {
		display: flex;
		padding: 10rpx;
	}

	.voteAgree {
		width: 320rpx;
		height: 120rpx;
		background-color: rgb(251, 55, 119);
		border-radius: 80rpx 20rpx 20rpx 80rpx;
		margin-right: 20rpx;
	}

	.voteDisagree {
		width: 320rpx;
		height: 120rpx;
		background-color: rgb(60, 152, 218);
		border-radius: 20rpx 80rpx 80rpx 20rpx;
		text-align: center;
	}

	.voteUp {
		display: block;
		font-size: 36rpx;
		color: #fff;
		padding: 10rpx 60rpx 5rpx 60rpx;
	}

	.voteDown {
		display: block;
		font-size: 20rpx;
		color: #fff;
		padding: 0px 60rpx 0px 60rpx;
	}

	.viewpointBottom {
		display: flex;
		padding: 10rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		padding: 10rpx;
		justify-content: space-between;
	}

	.hotTopic {
		padding: 20rpx;
	}

	.hotTopicTit {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.topTopic {
		width: 98%;
		height: 330rpx;
		background-color: rgb(253, 250, 249);
		border-radius: 20rpx;
		padding-top: 20rpx;
	}

	.topTopOne {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-around;

	}

	.topicTp {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.hotTag {
		padding: 20rpx;
	}

	.hotTagTit {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.tagTopOne {
		display: flex;
		margin-bottom: 20rpx;
	}

	.together {
		margin-top: 35rpx;
		width: 100%;
		background-color: #fff;
	}

	.topic {
		display: flex;
		justify-content: space-between;
	}

	.topicCon {
		width: 310rpx;
		height: 80rpx;
		border: 1px solid rgb(235, 235, 235);
		border-radius: 12rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 20rpx 5rpx 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.topicMess {
		width: 44rpx;
		height: 40rpx;
		color: rgb(255, 255, 255);
		text-align: center;
		background-color: rgb(60, 152, 218, 0.5);
		border-radius: 50%;
	}

	.recommend {
		width: 28rpx;
		height: 28rpx;
		border-radius: 4rpx;
		text-align: center;
		background-color: rgb(60, 152, 218);
		color: #fff;
		font-size: 16rpx;
		font-weight: 400;
		line-height: 29rpx;
	}

	.title {
		width: 400rpx;
		padding: 10rpx;
	}

	.oneUser {
		padding: 20rpx;
		border-bottom: 1px solid rgb(238, 238, 238);
	}

	.oneUserTit {
		display: flex;
		justify-content: space-between;
	}

	.CommentContent {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.smallTopic {
		width: 290rpx;
		height: 40rpx;
		color: rgb(60, 152, 218);
		border-radius: 40rpx;
		background-color: rgb(243, 247, 251);
		font-size: 20rpx;
		text-align: center;
		margin-top: 10rpx;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.fromArea {
		margin-left: 20rpx;
	}

	.symboIcon {
		height: 40rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.party {
		padding: 20rpx;
	}

	.partyTit {
		display: flex;
		justify-content: space-between;
	}

	.inv-h-w {
		display: flex;
		width: 200rpx;
		text-align: center;
		justify-content: space-around;
		padding: 10rpx;
	}

	.inv-h {
		font-size: 24rpx;
		text-align: center;
		color: #C9C9C9;
		line-height: 40rpx;
	}

	.inv-h-se {
		color: black;
	}

	.firstCommon {
		margin-top: 20rpx;
		border-bottom: 1px solid rgb(238, 238, 238);
	}

	.replyHot {
		width: 688rpx;
		height: 72rpx;
		margin-top: 20rpx;
		line-height: 70rpx;
		background-color: rgb(192, 192, 192, 0.5);
		font-size: 22rpx;
	}

	.hotTop {
		text-align: center;
		font-size: 22rpx;
	}

	// 弹窗
	.popup-content {
		width: 300rpx;
		height: 150rpx;
		font-size: 24rpx;
		color: #464547;
		padding: 20rpx;
	}

	.popup-text {
		margin-top: 25rpx;
	}
	
	// 回复弹窗
	.popup-reply{
		padding: 20rpx;
	}
	// 全部短评回复
	.replyHeadAll{
		margin-top: 15rpx;
	}
	
	.replyTitle{
		text-align: center;
		margin: 20rpx ;
	}
	.replyContent{
		display: flex;
		margin-top: 20rpx;
	}
	
	.reply-con{
		width: calc(100% - 90rpx);
		border-bottom: 5rpx solid rgb(232, 232, 232);
	}
	
	.reply-ConName{
		display: flex;
		justify-content: space-between;
	}
	
	.reply-conBot{
		display: flex;
		justify-content: space-between;
		color: rgb(158, 162, 185);
		font-size: 26rpx;
		line-height: 80rpx;
	}
	
	// 热门回复
	.reply-hotContent{
		display: flex;
		// padding: 20rpx;
		margin-top: 20rpx;
	}
	.reply-HotName{
		display: flex;
		justify-content: space-between;
	}
	
	.reply-hotR{
		width: calc(100% - 90rpx);
		border-bottom: 5rpx solid rgb(232, 232, 232);
	}
	
	.reply-hotBottom{
		display: flex;
		justify-content: space-between;
		color: rgb(158, 162, 185);
		font-size: 26rpx;
		line-height: 80rpx;
	}
	
	
	// 举报提示框
	.report{
		width: 80rpx;
		height: 60rpx;
		background-color: rgb(88, 91, 97);
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		line-height: 50rpx;
		position: absolute;
		bottom:80rpx;
		right: 30rpx;
	}
	
</style>